<template>
  <!-- 主内容区 -->
  <div class="row">
    <!-- 树形菜单区域 -->
    <div class="col-md-3">
      <!--  关系绑定按钮  -->
      <a v-if="canAssociate" href="javascript:void(0)" class="btn btn-primary btn-block margin-bottom" @click="handleAssociate">关系绑定</a>
      <!--  树形菜单  -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">桥梁结构形式</h3>
        </div>
        <div class="box-body no-padding">
          <el-tree
            class="tree-view"
            node-key="id"
            :data="treeData"
            :props="treeProps"
            :current-node-key="selectedNode.id"
            @node-click="handleNodeClick"
            auto-expand-parent
            highlight-current
            accordion>
          </el-tree>
        </div>
      </div>
    </div>

    <!--  表格区域  -->
    <div class="col-md-9">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">{{selectedNode.name}}部件列表</h3>
        </div>
        <div class="box-body">
          <div class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition">
            <div class="el-table__header-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%;">
                <thead>
                <tr>
                  <th class="is-center"><div class="cell">部位</div></th>
                  <th class="is-center"><div class="cell">类别i</div></th>
                  <th class="is-center"><div class="cell">评价部件</div></th>
                  <th class="is-center"><div class="cell">权重</div></th>
                </tr>
                </thead>
              </table>
            </div>
            <div class="el-table__body-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width:100%;">
                <tbody>
                <tr class="el-table__row" v-for="(row, index) of tableData">
                  <td v-if="!!row.rowSpan && row.rowSpan>0" :rowspan="row.rowSpan" class="is-center"><div class="cell" style="font-weight: bold">{{row.positionTypeName}}</div></td>
                  <td class="is-center"><div class="cell">{{index+1}}</div></td>
                  <td class="is-center"><div class="cell">{{row.partsTypeName}}</div></td>
                  <td class="is-center">
                    <div v-if="canEdit" class="cell">
                      <!--修改确认框-->
                      <el-popover
                        effect="dark"
                        placement="left"
                        width="160"
                        trigger="manual"
                        :value="currentRowId === row.id"
                        @hide="handleHide">
                        <div style="text-align: right; margin: 0">
                          <p>是否保存修改后的权重？</p>
                          <el-button size="mini" type="text" @click="currentRowId=''">取消</el-button>
                          <el-button type="primary" size="mini" @click="saveWeight(row)">确定</el-button>
                        </div>
                        <el-input slot="reference" type="number" v-model.number="row.weight" placeholder="请输入权重" @input="currentRowId=row.id"></el-input>
                      </el-popover>
                    </div>
                    <div v-else>{{row.weight}}</div>
                  </td>
                </tr>
                </tbody>
              </table>
              <div v-if="!tableData || tableData.length === 0" class="el-table__empty-block" style="width: 100%">
                <span class="el-table__empty-text" style="width: 100%;">
                  请进行以下操作：（1）选择左侧桥梁结构形式查看；（2）选择左侧桥梁结构形式，绑定部件类型。
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 对话框 -->
    <el-dialog title="关系绑定" size="tiny" v-model="isAssociationDialogVisible" :close-on-click-modal="closeOnClickModal">
      <!-- 关系绑定树形菜单 -->
      <el-card v-loading="loadingPositionParts" class="card">
        <div slot="header">
          <span class="card-head">{{selectedNode.name}}关系绑定</span>
        </div>
        <el-tree
          ref="positionPartsTree"
          class="tree-view"
          node-key="id"
          :data="positionPartsData"
          :props="treeProps"
          highlight-current
          show-checkbox
          accordion>
        </el-tree>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAssociationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="associate" :loading="isAssociating">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {doGet, doPost} from "../../../assets/js/utils/RequestUtils"
  import {hasAuthorizedFunction, getAuthorizedFunction} from "../../../assets/js/global"
  import {ASSOCIATE, EDIT} from "../../../assets/js/enum/FunctionType"
  import {COMPLETE, LOADING} from "../../../store/mutationTypes"
  import {treeOf} from "../../../assets/js/utils/TreeUtils"
  import {appendMergeProp} from "../../../assets/js/utils/ObjectUtils"

  const TREE_DATE_URL = "/rel/bridgePartsRel/getBridgeTypeList";
  const TABLE_DATA_URL = "/rel/bridgePartsRel/getList";
  const POSITION_PARTS_URL = "/param/memberType/getPositionPartsTree";
  const ASSOCIATE_URL = "/rel/bridgePartsRel/add";
  const EDIT_URL = "/rel/bridgePartsRel/edit";

  export default {
    name:"BridgePartsRel",
    data() {
      return {
        treeData:[],
        originTableData:[],
        treeProps:{
          label:"name",
          children:"children"
        },
        associationDialogTitle:"",
        isAssociationDialogVisible:false,
        selectedNode:{
          bridgeTypeId:"",
          partsTypeId:""
        },
        loadingPositionParts:false,
        positionPartsData:[],
        isAssociating:false,
        closeOnClickModal:false,
        currentRowId:""
      }
    },
    computed:{
      tableData() {
        //筛选出选中的节点
        return appendMergeProp(this.originTableData.filter(item=>item.bridgeTypeId === this.selectedNode.id), "positionTypeName", "rowSpan");
      },
      canAssociate() {
        return hasAuthorizedFunction(this, ASSOCIATE);
      },
      canEdit() {
        return hasAuthorizedFunction(this, EDIT);
      }
    },
    methods:{
      handleNodeClick(data) {
        this.selectedNode = data;
      },
      handleHide() {
        this.fetchData();
      },
      handleAssociate() {
        this.isAssociationDialogVisible = true;
        this.loadingPositionParts = true;
        doGet(POSITION_PARTS_URL, {component:this})
          .then(response=>{
            this.positionPartsData = treeOf(response);
            this.$refs["positionPartsTree"].setCheckedKeys(this.originTableData.filter(item=>item.bridgeTypeId === this.selectedNode.id).map(item=>item.partsTypeId));
          })
          .finally(()=>this.loadingPositionParts = false)
      },
      associate() {
        this.isAssociating = true;
        doPost(ASSOCIATE_URL, {
          data:{
            bridgeTypeId:this.selectedNode.id,
            partsTypeIds:this.$refs["positionPartsTree"].getCheckedNodes().filter((node,index,array)=>!array.some(item=>node.id === item.parentId)).map(node=>node.id)
          },
          menuFunctionId:getAuthorizedFunction(this, ASSOCIATE),
          component:this
        })
          .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
          .finally(()=>{
            this.isAssociating = false;
            this.isAssociationDialogVisible = false;
            this.fetchData();
          });
      },
      saveWeight(data) {
        doPost(EDIT_URL, {
          data,
          component:this,
          menuFunctionId:getAuthorizedFunction(this, EDIT)
        })
          .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
          .finally(()=>this.currentRowId="")
      },
      fetchData(needDefaultSelected) {
        this.$store.commit(LOADING);
        doGet(TREE_DATE_URL, {component:this}).then(response=>{
          this.treeData = response;
          if(needDefaultSelected && Array.isArray(this.treeData) && this.treeData.length>0) this.selectedNode = this.treeData[0];
          doGet(TABLE_DATA_URL, {component:this})
            .then(response=>this.originTableData = response)
            .finally(()=>this.$store.commit(COMPLETE));
        });
      }
    },
    activated() {
      this.fetchData(false);
    },
    created() {
      this.fetchData(true);
    }
  }
</script>

<style scoped>
  .tree-view {
    border: 0;
  }
  .card {
    margin-left: 15px;
    padding: 5px 5px 5px 5px;
  }
  .card-head {
    font-size: 1.2em;
    font-weight: bold;
  }
</style>



// WEBPACK FOOTER //
// BridgePartsRel.vue?483e5390